<template>
  <div>
    <el-dialog
      class="mt-dialog"
      :title="title"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      top="80px"
      width="90%"
      @close="close"
    >
      <el-container>
        <el-aside width="200px">
          <el-form :inline="false" class="demo-form-inline" size="mini">
            <el-form-item label="域名" size="mini">
              <el-input v-model="temp_domain" size="mini" placeholder="域名" />
            </el-form-item>
            <el-form-item label="网站ID" size="mini">
              <el-input v-model="temp_website_id" size="mini" placeholder="网站ID" />
            </el-form-item>
            <el-form-item label="产品ID" size="mini">
              <el-input v-model="temp_product_id" size="mini" placeholder="产品ID" />
            </el-form-item>
          </el-form>
          <el-alert
            title="重要提醒"
            effect="dark"
            description="先修改产品价格,再修改feed价格，不要忘记清除缓存，查看效果"
            :closable="false"
            style="margin-bottom: 10px"
            type="warning"
          />
          <el-button v-if="this.temp_product_id !== ''" type="primary" @click="handleSearchProduct">查询产品</el-button><br>
          <el-button v-if="this.ps_product_id !== ''" type="text" @click="orderdetailVisual=true">订单查询</el-button>
        </el-aside>
        <el-main style="padding-top: 0px">
          <el-tabs v-model="activeName" @tab-click="handleModifyTabClick">
            <el-tab-pane label="网站产品信息" name="first">
              <prestaproduct_inner :domain="ps_domain" :product_id="ps_product_id" :shown="dialogVisible" />
            </el-tab-pane>
            <el-tab-pane label="Feed产品信息" name="second">
              <feedproduct_inner :website_id="ps_website_id" :product_id="ps_product_id" />
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>

      <span slot="footer" class="dialog-footer" />
    </el-dialog>
    <orderdetail
      :order-static-visible="orderdetailVisual"
      :website_id="ps_website_id"
      :product_id="ps_product_id"
      @closeMyDialog="orderdetailVisual=false"
    />
  </div>
</template>

<script>
import Feedproduct_inner from './feedproduct_inner'
import prestaproduct_inner from '@/views/prestashop/element/prestaproduct_inner'
import orderdetail from '@/views/orders/element/orderdetail'

export default {
  name: 'Feedproductmodify',
  components: { orderdetail, Feedproduct_inner, prestaproduct_inner },
  props: ['pstVisible', 'product_id', 'website_id', 'domain'],
  data() {
    return {
      orderdetailVisual: false,
      title: '获取/修改产品信息',
      activeName: 'first',
      dialogVisible: false,
      ps_product_id: this.product_id,
      ps_website_id: this.website_id,
      ps_domain: this.domain,
      temp_website_id: this.website_id,
      temp_product_id: this.product_id,
      temp_domain: this.domain
    }
  },
  watch: {
    product_id: {
      handler(newName, oldName) {
        this.ps_product_id = newName
        this.temp_product_id = newName
        console.log(' moidfy get new product_id', newName)
      },
      immediate: true,
      deep: true
    },
    website_id: {
      handler(newName, oldName) {
        this.ps_website_id = newName
        this.temp_website_id = newName
        console.log('moidfy get new website_id', newName)
      },
      immediate: true,
      deep: true
    },
    domain: {
      handler(newName, oldName) {
        this.ps_domain = newName
        this.temp_domain = newName
        console.log('moidfy get new ps_domain', newName)
      },
      immediate: true,
      deep: true
    },
    pstVisible(v) {
      this.dialogVisible = v
    }
  },
  methods: {
    handleSearchProduct() {
      this.ps_domain = this.temp_domain
      this.ps_website_id = this.temp_website_id
      this.ps_product_id = this.temp_product_id
    },
    handleModifyTabClick() {
      console.log('tab click')
    },
    close() {
      this.title = '请核对域名信息，如果域名不对请不要提交'
      this.$emit('closePstDialog', false)
    }
  }
}
</script>

<style scoped>

  .top >>> .input-with-select .el-input-group__prep end {
    background-color: #fff;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }
</style>
